<!--  -->
<template>
  <div class="address-add">
    <Nav title="新建地址">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="addressadd_con">
      <!-- 收货人 -->
      <div class="addressadd_item flex justify-between aligin-center">
        <span class="f-14">收货人</span>
        <!-- <input class="f-14 text-right color-black" type="text" placeholder="收货人姓名"> -->
        <div>
          <cube-input v-model="name" placeholder="收货人姓名" clearable></cube-input>
          <cube-validator ref="username" v-model="valid[0]" :model="name" :rules="commonRules"></cube-validator>
        </div>
      </div>
      <!-- 联系方式 -->
      <div class="addressadd_item flex justify-between aligin-center">
        <span class="f-14">联系方式</span>
        <!-- <input class="f-14 text-right color-black" type="number" placeholder="手机号码"> -->
        <div>
          <cube-input v-model="mobile" placeholder="手机号码" clearable type="number"></cube-input>
          <cube-validator ref="mobile" v-model="valid[1]" :model="mobile" :rules="rules"></cube-validator>
        </div>
      </div>
      <!-- 区域选择 -->
      <div class="addressadd_item flex justify-between aligin-center">
        <span class="f-14">区域选择</span>
        <div class="flex-1" @click="showAsyncPicker">
          <div class="text-right f-14 color-gray">{{area||'区域选择'}}</div>
          <cube-validator ref="area" v-model="valid[2]" :model="area" :rules="commonRules"></cube-validator>
        </div>
      </div>
      <!-- 详细地址 -->
      <div class="addressadd_item flex justify-between aligin-center">
        <span class="f-14">详细地址</span>
        <div>
          <cube-input v-model="detailArea" placeholder="街道、小区、门牌号" clearable></cube-input>
          <cube-validator
            ref="detailArea"
            v-model="valid[3]"
            :model="detailArea"
            :rules="commonRules"
          ></cube-validator>
        </div>
      </div>
      <!-- 默认地址 -->
      <div class="addressadd_item flex justify-between aligin-center">
        <span class="f-14">默认地址</span>
        <cube-switch v-model="isDefault" class="address_default"></cube-switch>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="addressadd_foot" v-show="showBtn">
      <button
        class="addressadd_btn btn_public flex justify-center aligin-center"
        @click="confirm"
      >完成</button>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { area, addressAdd } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      clientHeight:document.documentElement.clientHeight,
　　　showBtn: true,  // 控制按钮盒子显示隐藏
      mobile: "", //手机号
      name: "", //姓名 
      area: "", //地址
      detailArea: "", //详细地址
      valid: [undefined, undefined, undefined, undefined],
      isDefault: true, //默认地址
      rules: {
        required: true,
        type: "tel"
      },
      asyncPicker: null, //地址选择对象
      commonRules: {
        required: true
      },
      areaList: [], //区域列表
      cityList: [], //城市列表
      provinceList: [], //省市列表
      asyncSelectedIndex: [0, 0, 0] //地址选择索引
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 提交
    confirm() {
      const username = this.$refs.username.validate();
      const mobile = this.$refs.mobile.validate();
      const area = this.$refs.area.validate();
      const detailArea = this.$refs.detailArea.validate();

      Promise.all([username, mobile, area, detailArea]).then(() => {
        if (this.valid.every(item => item)) {
          let params={
             mobile: this.mobile,
            consigner: this.name,
            province: this.provinceList[this.asyncSelectedIndex[0]].value,
            city: this.provinceList[this.asyncSelectedIndex[0]].children[
              this.asyncSelectedIndex[1]
            ].value,
            district: this.provinceList[this.asyncSelectedIndex[0]].children[
              this.asyncSelectedIndex[1]
            ].children[this.asyncSelectedIndex[2]].value,
            address: this.detailArea,
            is_default: this.isDefault?1:0
          }
          if(this.$route.query.order_no){
            params=Object.assign(params,{from:this.$route.query.order_no})
          }
          addressAdd(params).then(res=>{
            this.$router.back()
          });
        }
      });
    },
    // 显示地址选择
    showAsyncPicker() {
      this.asyncPicker.show();
      let a = document.querySelectorAll(".cube-picker-wheel-item");
      a.forEach(item => {
        item.style.fontSize = "16px";
      });
    },
    // 选中地址
    selectHandle(selectedVal, selectedIndex, selectedText) {
      this.asyncSelectedIndex = selectedIndex;
      this.area = selectedText.join("/");
    },
    //取消地址选择
    cancelHandle() {}
  },
  created() {},
  mounted() {
      //  window.onresize= ()=>{
      //       if(this.clientHeight>document.documentElement.clientHeight) {
      //          this.showBtn =false
      //       }else{
      //           this.showBtn = true
      //       }
      //   }
    this.asyncPicker = this.$createCascadePicker({
      title: "区域选择",
      data: this.provinceList,
      selectedIndex: this.asyncSelectedIndex.slice(),
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
      onChange: this.asyncChangeHandle
    });
    area().then(({ data: { result } }) => {
      this.areaList = result.areaList;
      this.cityList = result.cityList;
      this.provinceList = result.provinceList;
      this.provinceList.forEach(province => {
        province.children = this.cityList[province.value];
        province.children.forEach(city => {
          city.children = this.areaList[city.value];
        });
      });
      this.asyncPicker.setData(this.provinceList, [0, 0, 0]);
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
//修改手机号
.text-right{
  text-align: right;
}
.address-add{
  position: relative;
  height: 100%;
}
.address-add /deep/ .cube-input-field {
  text-align: right;
}
.address-add /deep/ .cube-validator-msg {
  text-align: right;
}
//地址选择字体
.address-add /deep/ .cube-picker-wheel-item {
  font-size: 16px;
}
.flex-1 {
  flex: 1;
}
input::-webkit-input-placeholder {
  color: #bcbcbc;
}
input:-ms-input-placeholder {
  // IE10+
  color: #bcbcbc;
}
input:-moz-placeholder {
  // Firefox4-18
  color: #bcbcbc;
}
input::-moz-placeholder {
  // Firefox19+
  color: #bcbcbc;
}
.addressadd_con {
  margin-top: 3px;
}
.addressadd_item {
  margin-left: 14px;
  padding: 0 22px 0 8px;
  border-bottom: 1px solid #eaeaea;
  height: 55px;
}
// 地址
.addressadd_item /deep/ .cube-btn {
  padding: 0;
  font-size: 14px;
  background: transparent;
  color: #bcbcbc;
  width: auto;
  position: relative;
  padding-right: 18px;
}
.address_changes::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid #bcbcbc;
  border-width: 0 1px 1px 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  position: absolute;
  right: 0;
  top: 50%;
}
.address-add /deep/ .border-bottom-1px::after {
  border-bottom: 0;
}
// 活动开关
.addressadd_item
  /deep/
  .cube-switch
  .cube-switch-input:checked
  + .cube-switch-ui {
  background-color: #49df00;
  border-color: #49df00;
}
.addressadd_foot{
  margin: 200px 15px 0;
}

</style>